﻿@model CSCSN.WebApplication.Models.UserDataVM

@{
    ViewData["Title"] = "Edit";
    Layout = "_LayoutNavigationBar";
}
<style>
    .myimg {
        max-height: 150px;
        max-width: 150px;
    }

    .rows .col-md-4 {
        float: left;
        margin-top: 50px;
        margin-left: 30px;
    }

    .control-label {
        position: absolute;
    }

    .form-control {
        margin-left: 100px;
    }

    .Sex {
        margin-left: 50px;
    }

    .form_input {
        height: 100px;
    }

    .rows {
        overflow: hidden;
        height: 800px;
    }
</style>
<div class="right_content_title">
    <span class="right_content_title_text">我的头像</span>
</div>
<div class="rows">
    <form asp-action="Edit" enctype="multipart/form-data" method="post">
        <div class="col-md-4">
            <div class="form-group">
                <label for="exampleInputFile"></label>
                <img src="@Model.HeadPortrait" alt="album Img" class="myimg" id="albumImg" />
                <input type="file" name="Files" id="fileupload" required="required" />
            </div>
            <div class="form-group">
                <input type="submit" value="提 交" class="btn btn-primary" />
            </div>
        </div>
    </form>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
<script src="~/lib/jquery/dist/jquery-1.10.2.js"></script>
<script>
    $("#fileupload").change(function (e) {
        var file = e.delegateTarget.files[0];
        //在此可以对选择的文件进行判断
        var hz = file.name.substring(file.name.indexOf('.'));//文件后缀
        if (!IsImage(hz.toLocaleUpperCase())) {
            alert("文件要求的图片类型：jpg,gif,png,bmp");
            $("#fileupload").val("");//清空文件标签
        }
        else {
            if (file.size > 3145728) {
                alert("图片大小越界（<3MB）");
                $("#fileupload").val("");//清空文件标签
            }
            else {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (ret) {
                    picString = reader.result
                    $("#albumImg").attr({ "src": picString });
                }
            }
        }
    });

    function IsImage(hz) {
        var ys = false;
        var hzs = new Array(".JPG", ".GIF", ".PNG", "BMP");
        for (var i = 0; i < hzs.length; i++) {
            if (hz == hzs[i]) {
                ys = true;
                break;
            }
        }
        return ys;
    }

</script>